<!DOCTYPE html>
<style>
div {
  position: absolute;
  width: 100px;
  height: 100px;
}
#target {
  background: red;
  opacity: 1;
  animation: test 1e8s;
}
#green {
  background: green;
}
@keyframes test {
  to { opacity: 0; }
}
</style>
<div id="green"></div>
<div id="target"></div>
<script>
if (window.testRunner)
  testRunner.waitUntilDone();

function waitForCompositor() {
  return target.animate({transform: ['none', 'none']}, 1).ready;
}

waitForCompositor().then(() => {
  target.style.opacity = '0';
}).then(() => waitForCompositor()).then(() => {
  if (window.testRunner)
    testRunner.notifyDone();
});
</script>
